<template>
    <div>
        <!-- 头部 -->
        <van-nav-bar title="百慕大影城" >
            <template #right>
                <van-popover v-model:show="showPopover" :actions="actions" placement="bottom-end">
                <template #reference>
                    <van-icon name="apps-o" size="20" />
                </template>
                </van-popover>
            </template>
        </van-nav-bar>

        <!-- 广告栏 -->
        <AppHeader></AppHeader>
        <!-- <app-header></app-header> -->
        <!-- <van-empty description="首页尽情期待" /> -->
        
        <!-- topnav顶部导航 -->
        <van-sticky>
            <div class="topnav">
                <span>北京</span>
                <s></s>
                <van-tabs class="tabs" v-model:active="navActive" color="#FF0000">
                    <van-tab title="热映" name="1"></van-tab>
                    <van-tab title="待映" name="2"></van-tab>
                    <van-tab title="经典" name="3"></van-tab>
                </van-tabs>
                <van-icon color="#FF0000" style="font-weight: bold;" size="20" name="search" /> 
            </div>
        </van-sticky>
        

        <!--电影列表项 -->
        <!-- vant中列表 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" 
            success-text='加载成功！' success-duration="800">
            <van-list
            style="margin-bottom: 40px;"
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
                <MovieItem v-for="item in movie" :key="item.id" 
                :movie="item" @click="$router .push(`/detail/${item.id}`)"></MovieItem>
            </van-list>
        </van-pull-refresh>
       
        
       
    </div>
</template>

<script setup lang="ts">
import AppHeader from '@/components/AppHeader.vue'
import MovieItem from '@/components/MovieItem.vue';
import httpApi from '@/http';
import Movie from "@/types/Movie";
import { ref , onMounted,reactive, watch} from 'vue';
// 顶部标题栏相关
const showPopover = ref(false)
const actions = [{text:'首页'},{text:'榜单'},{text:'热点'}]

// 顶部导航相关
const navActive = ref('1')
//监听navActive
watch(navActive, (newval, oldval)=>{
    // newval 就是选中项的类别ID
    console.log('选中项的类别ID',newval);
    //回到顶部
    //窗口定位0，0的位置
    window.scrollTo(0,108)
    //当点击导航时内容要重新加载，加载完毕变为false
    // 重置当前页码与finished变量
    page.value = 1
    finished.value = false
    // 发请求之前，得先去sessionStorage中寻找，是否以前存过，如果存过直接使用
    let moviesCache =sessionStorage.getItem(newval)
    if(moviesCache){
        let list:Movie[] = JSON.parse(moviesCache)
        movie.splice(0,movie.length,...list)
        return;
    }
    // 若没有找到缓存，则重新发送请求
    // 获取结果
    let parmas = {cid:parseInt(newval), page:1, pagesize:20}
     httpApi.movieApi.queryByCategoryId(parmas).then(res=>{
        console.log('重新加载热映类别首页电影列表',res);
        let list:Movie[] = res.data.data.result
        // 替换当前列表数据 splice方法可以删除所有元素，同时设置新元素
        movie.splice(0,movie.length,...list)
         // 将list存入sessionStorage  key:电影类别id   value:电影对象列表
         sessionStorage.setItem(newval,JSON.stringify(list))        
     })
    
})


//代理对象
const movie = reactive<Movie[]>([])
//加载首页热映数据
// 组件挂载完毕后执行（钩子函数）
// onMounted(()=>{
//      // 发送httpApi请求，加载首页热映类别下的电影列表
//      let parmas = {cid:1, page:1, pagesize:20}
//      httpApi.movieApi.queryByCategoryId(parmas).then(res=>{
//         console.log('加载热映类别首页电影列表',res);
//         let list:Movie[] = res.data.data.result
//         movie.push(...list)
        
//      })
// })

// 触底加载下一页时相关代码
// 是否正在加载中，执行onLoad时自动改为true，数据加载完后需要手动改为false
//loading是正在加载，finished加载完毕
const loading = ref(false);
// 数据是否已经加载完毕，如果设置为true，则将不会再执行触底onLoad
const finished = ref(false);
const page = ref(1)
//加载函数
function onLoad(){
    //先进入自动进行加载，可以替代掉 onMounted 中的代码，
    console.log('到底加载');
     // 发送httpApi请求，加载首页热映类别下的电影列表
     let parmas = {
        cid:parseInt(navActive.value), 
        page:page.value++, 
        pagesize:20}
     httpApi.movieApi.queryByCategoryId(parmas).then(res=>{
        console.log('加载热映类别首页电影列表',res);
        let list:Movie[] = res.data.data.result
        movie.push(...list)
        //手动控制变量
        loading.value = false
        //如果list数组已经加载不到数据了，就代表到底了
        if(list.length == 0){
            finished.value = true
        }
     })
    
}

// 处理下拉刷新业务
// refreshing是否正在下拉刷新
const refreshing = ref(false)
// 下拉执行函数
function onRefresh(){
    // 下拉刷新，释放后执行，将自动设置refreshing=true
    console.log('下拉刷新。。。');
    // 重新加载当前类别下的首页电影列表
    // 页码初始化
    page.value = 1
    let parmas = {
        cid:parseInt(navActive.value), 
        page:1, 
        pagesize:20}
    httpApi.movieApi.queryByCategoryId(parmas).then(res =>{
        let list:Movie[] = res.data.data.result
        movie.splice(0, movie.length, ...list)
        // 需要手动设置refreshing=false，下拉刷新数据加载已完成
        refreshing.value=false
        // 将movies数组，更新一下本地缓存
        sessionStorage.setItem(navActive.value, JSON.stringify(movie))
    })
    
}
</script>

<style scoped lang="scss">
.topnav{
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #eee;
    .tabs{
        flex: 1;
        margin: 0px 25px;
    }
    s{
        border: 4px solid black;
        border-color: transparent;
        border-top-color:#444 ;
        margin: 5px 0px 0px 3px;

    }

}
</style>
<style >
:root{
    --van-nav-bar-background:red;
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
}

</style>